<script setup>
import { ref } from 'vue'
import { getUploadPicture, postGraphics } from '@/apis/apis.js'
import { showToast } from '@/utils/utils.js'
import { usePatientStore } from '@/store/index.js'
const imgList = ref([])
const illness = ref('')
const guide = ref(false)
const patientStore = usePatientStore()
const handleChooseMedia = async () => {
  let res = await uni.chooseMedia({
    count: 1,
    mediaType: ['image'],
    sourceType: ['album'],
    sizeType: ['compressed']
  })
  res = await uni.uploadFile({
    url: import.meta.env.VITE_API_URL + '/upload_picture',
    filePath: res.tempFiles[0].tempFilePath,
    name: 'file',
    header: {
      accept: 'application/json'
    }
  })
  console.log(JSON.parse(res.data))
  imgList.value.unshift(JSON.parse(res.data).data)
}
const handleSubmit = async () => {
  const data = {
    illness: illness.value,
    guide: guide.value,
    ins_report: imgList.value,
    patient_id: patientStore.patientId
  }
  const res = await postGraphics(data)
  console.log(res)
  showToast('提交成功')
  setTimeout(() => {
    uni.navigateBack()
  }, 1000);
}
const handleChangeGuide = () => {
  guide.value = !guide.value
}
const handleDelete = (item, index) => {
  imgList.value = imgList.value.filter(value => value !== item)
}
const handleChoose = () => {
  uni.navigateTo({ url: '/pages/my-service/my-patient/my-patient' })
}
const handleCancel = () => {
  uni.navigateBack()
}
</script>

<template>
  <view class="view">
    <view class="view-content">
      <view class="view-content-title">请详细描述你的病情</view>
      <view class="view-content-tip">为了更好获得医生帮助，请尽可能详细描述病情</view>
      <textarea class="view-content-textarea" v-model.trim="illness" />
    </view>
    <view class="view-teach">
      <checkbox-group class="view-teach-checkbox-group" @change="handleChangeGuide">
        <checkbox class="view-teach-checkbox" />
        <view class="view-teach-tip">需要医生指导用药</view>
      </checkbox-group>
    </view>
    <view class="view-pic">
      <view class="view-pic-title">上传检查报告或患处照片</view>
      <scroll-view scroll-x enable-flex class="view-pic-images">
        <view class="view-pic-image-container" v-for="(item, index) in imgList" :key="index">
          <image class="view-pic-image" :src="item" mode="aspectFill"></image>
          <image class="view-pic-delete" src="/static/images/shanchu-goods.svg" mode="widthFix" @click="handleDelete(item, index)"></image>
        </view>
        <view class="view-pic-upload-container">
          <image class="view-pic-upload" src="/static/images/shuxing-img.png" mode="aspectFill" @click="handleChooseMedia"></image>
        </view>
      </scroll-view>
    </view>
    <view class="view-patient">
      <view class="view-patient-title">选择就诊人</view>
      <view class="view-patient-content">
        <view class="view-patient-left-container">
          <image class="view-patient-left" src="/static/images/touxiang.svg" mode="widthFix"></image>
          <view class="view-patient-name">{{ patientStore.patientName }}</view>
        </view>
        <view class="view-patient-right" @click="handleChoose">{{ patientStore.patientId === '' ? '选择就诊人' : '重新选择' }}</view>
      </view>
    </view>
    <view class="view-footer">
      <view class="view-footer-cancel" @click="handleCancel">取消</view>
      <view class="view-footer-submit" @click="handleSubmit">提交</view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.view {
  position: relative;
  padding-top: 20rpx;
  min-height: 100vh;
  background-color: #f8f8f8;
  .view-content {
    display: flex;
    flex-direction: column;
    margin: 0 20rpx 20rpx;
    padding: 20rpx;
    background-color: #fff;
    .view-content-title {
      font-weight: bold;
    }
    .view-content-tip {
      margin: 20rpx 0;
      color: #7cd3cf;
      font-size: 28rpx;
    }
    .view-content-textarea {
      width: 100%;
      min-height: 100rpx;
    }
  }
  .view-teach {
    margin: 20rpx;
    padding: 20rpx;
    background-color: #fff;
    .view-teach-checkbox-group {
      display: flex;
      align-items: center;
      .view-teach-tip {
        font-size: 28rpx;
      }
    }
  }
  .view-pic {
    display: flex;
    flex-direction: column;
    margin: 20rpx;
    padding: 20rpx;
    background-color: #fff;
    .view-pic-title {
      margin-bottom: 20rpx;
      font-weight: bold;
    }
    .view-pic-images {
      display: flex;
      height: 200rpx;
      white-space: nowrap;
      .view-pic-image-container {
        position: relative;
        margin-right: 20rpx;
        .view-pic-image {
          width: 200rpx;
          height: 200rpx;
        }
        .view-pic-delete {
          position: absolute;
          top: 10rpx;
          right: 10rpx;
          width: 30rpx;
        }
      }
      .view-pic-upload {
        width: 200rpx;
        height: 200rpx;
      }
    }
  }
  .view-patient {
    display: flex;
    flex-direction: column;
    margin: 20rpx;
    padding: 20rpx;
    background-color: #fff;
    .view-patient-title {
      margin-bottom: 20rpx;
      font-weight: bold;
    }
    .view-patient-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .view-patient-left-container {
        display: flex;
        align-items: center;
        .view-patient-left {
          margin-right: 20rpx;
          width: 100rpx;
        }
      }
      .view-patient-right {
        color: #4376e4;
        font-size: 28rpx;
      }
    }
  }
  .view-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx;
    padding-bottom: env(safe-area-inset-bottom);
    width: 750rpx;
    background-color: #fff;
    .view-footer-cancel {
      padding: 20rpx 120rpx;
      background-color: #ecf3fe;
      border-radius: 10rpx;
      color: #4376e4;
    }
    .view-footer-submit {
      padding: 20rpx 120rpx;
      background-color: #4376e4;
      border-radius: 10rpx;
      color: #fff;
    }
  }
}
</style>
